<template>
  <div class="multipleupload">
    <el-drawer title="进度照片" :visible.sync="open" direction="rtl" size="30%">
      <ImageUpload v-model="upload.fileList" placeholder="请输入目标图片" :fileType="upload.fileType" :fileSize="upload.fileSize" @uploadSuccess="uploadSuccess" :limit="upload.limit" />
    </el-drawer>
  </div>
</template>

<script>
import { postFilesAdd, getfiles, getfileslist, delfiles } from "@/api/business/project/information";
export default {
  data() {
    return {
      open: false,
      mainId: null,
      //上传属性
      upload: {
        //文件列表
        fileList: [],
        limit: 50,
        fileSize: 100,
        fileType: ["jpg", "jpeg", "png", "gif",]
      },
      params: {
        tabName: null,
        mainId: null,
        busType: null
      },
      ImageList: []
    }
  },
  methods: {
    /**组件初始化方法 */
    init(row) {
      this.mainId = row.id
      this.open = true;
      this.getfileslist()
    },
    getfileslist() {
      this.params.tabName = "pm_progress";
      this.params.mainId = this.mainId;
      getfileslist(this.params).then(respone => {
        this.ImageList = respone.rows
        this.upload.fileList = respone.rows.map(item => item.url)
      })
    },
    uploadSuccess(file) {
      console.log(file, this.ImageList)
      if (typeof file === "string") {
        let list = this.ImageList.filter(item => item.url === file)
        if (list.length > 0) {
          let id = list[0].id
          delfiles(id).then(() => {
            this.$modal.msgSuccess("删除成功");
          })
        }
      } else {
        const params = {
          url: file.fileName,
          originName: file.originName,
          tabName: "pm_progress",
          mainId: this.mainId,
          busType: '进度照片'
        }
        postFilesAdd(params).then((res) => {
          this.$modal.msgSuccess("新增成功");
        })
      }
    },
  }
}
</script>

<style>
.multipleupload .el-upload--picture-card {
  width: 148px;
  height: 148px;
  line-height: 146px;
}
.multipleupload .el-drawer__body {
  padding: 0px 10px;
}
</style>